<template>
  <div class="app-main-container">
    <div class="doumee-filter">
      <el-form inline label-suffix="：" @submit.native.prevent>
        <el-form-item :label="$t('message.sbh')">
          <el-input v-model="filters.mac" :placeholder="$t('message.qsr') + $t('message.sbh')" clearable />
        </el-form-item>
        <el-form-item :label="$t('message.xlkgzt')">
          <el-select v-model="filters.status" :placeholder="$t('message.xzxlkgzt')" clearable>
            <el-option
              v-for="item in openStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick type="primary" @click="getList(1)">{{ $t('message.cz') }}</el-button>
          <el-button v-preventReClick @click="clearList">{{ $t('message.clear') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="active" @tab-click="handleClick">
      <el-tab-pane v-for="(tab, i) in tabList" :key="tab.id" :label="tab.manufacturer" :name="i.toString()">
        <div class="doumee-filter manufacturer">
          <div>
            <el-button type="danger" @click="yjgd">{{ $t('message.yjgd') }}</el-button>
            <el-button type="success" @click="showDsBtn">{{ $t('message.dinshi') }}</el-button>
            <el-button type="info" @click="showZhpzBtn">{{ $t('message.zhpz') }}</el-button>
            <el-button type="warning" @click="showGzpzBtn">{{ $t('message.gzpz') }}</el-button>
            <el-button type="primary" @click="tbBtn">{{ $t('message.tongbu') }}</el-button>
          </div>
          <div class="detail" @click="manufacturerDetail"><i class="el-icon-warning-outline" /> {{ $t('message.cssm') }}</div>
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-tableb"
        >
          <el-table-column
            align="center"
            :label="$t('message.sbh')"
            prop="lightId"
            show-overflow-tooltip
            min-width="260"
          />
          <el-table-column
            align="center"
            :label="$t('message.sbbm')"
            prop="aliasName"
            show-overflow-tooltip
            min-width="200"
          />
          <el-table-column
            align="center"
            :label="$t('message.xianlu')"
            prop="title"
            show-overflow-tooltip
            min-width="200"
          />
          <el-table-column
            align="center"
            :label="$t('message.sbwz')"
            prop="addres"
            show-overflow-tooltip
            min-width="260"
          />
          <el-table-column
            align="center"
            :label="$t('message.glcq')"
            prop="associatedField"
            show-overflow-tooltip
            min-width="200"
          />
          <el-table-column
            align="center"
            :label="$t('message.glcd')"
            prop="associatedPlace"
            show-overflow-tooltip
            min-width="200"
          />
          <el-table-column fixed="right" align="center" :label="$t('message.status')" min-width="120">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.oc"
                active-value="true"
                inactive-value="false"
                @change="toConfigUpdate($event, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column :label="$t('message.caozuo')" align="center" min-width="200" fixed="right">
            <template slot-scope="scope">
              <div class="flex-cc">
                <el-button v-if="functors && functors[0] == '1'" v-preventReClick type="text" @click="showTimeBtn(scope.row)">{{ $t('message.ckds') }}</el-button>
                <el-button v-if="functors && functors[1] == '1'" v-preventReClick type="text" @click="showCqcdBtn(scope.row)">{{ $t('message.bdcqcd') }}</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Paginations
          :total="total"
          :page="pagination.page"
          @current-change="getList"
          @SizeChange="handleSizeChange"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :title="$t('message.zhpz')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showZhpz"
    >
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="auto" label-suffix="：">
        <el-form-item :label="$t('message.sbcs')" prop="facturerId">
          <el-select v-model="form.facturerId" :placeholder="$t('message.qxz') + $t('message.sbcs')">
            <el-option
              v-for="item in tabList"
              :key="item.id"
              :label="item.manufacturer"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.facturerId == '15'" :label="$t('message.zcid')" :required="form.facturerId == '15'">
          <el-input v-model="form.assetId" :placeholder="$t('message.qsr') + $t('message.zcid')" />
        </el-form-item>
        <el-form-item v-if="form.facturerId == '6'" label="projectCode" prop="projectCode">
          <el-input v-model="form.projectCode" :placeholder="$t('message.qsr') + 'projectCode'" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showZhpz = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('message.gzpz')"
      :visible.sync="showGZPZ"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="810px"
    >
      <div class="warnningTip"><span><i class="el-icon-warning-outline" />{{ $t('message.kdgdpzsm') }}</span></div>
      <el-form ref="ruleFormb" :model="gzpz" :rules="ruleb" label-width="auto">
        <el-form-item :label="$t('message.hxrckd')" prop="isOpen">
          <el-switch
            v-model="gzpz.isOpen"
            active-value="1"
            inactive-value="0"
          />
          <span class="tip-style">{{ $t('message.kqdhsm') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.kd')" prop="kd">
          <el-input v-model="gzpz.kd" oninput="value=value.replace(/[^\d]/g,'')" style="width: 100px;" maxlength="5" />
          <span class="margin-l-10">{{ $t('message.fenzhong') }}</span>
          <span class="tip-style">{{ $t('message.pzkdsm') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.gd')" prop="gd">
          <el-input v-model="gzpz.gd" oninput="value=value.replace(/[^\d]/g,'')" style="width: 100px;" maxlength="5" />
          <span class="margin-l-10">{{ $t('message.fenzhong') }}</span>
          <span class="tip-style">{{ $t('message.pzgdsm') }}</span>
        </el-form-item>
        <el-form-item :label="$t('message.tssj')">
          <div class="tip-style noLeft">{{ $t('message.pzsjdgwbh') }}</div>
          <div v-for="(em, dex) in tsList" :key="dex" class="tsPz">
            <el-select
              v-model="em.areaId"
              :placeholder="$t('message.qxz') + $t('message.cq')"
              style="width: 200px"
              clearable
            >
              <el-option
                v-for="item in cqList"
                :key="item.id"
                :label="item.areaName"
                :value="item.id"
              />
            </el-select>
            <el-time-picker
              v-model="em.time"
              class="margin-l-10"
              style="width: 360px;"
              is-range
              value-format="HH:mm"
              format="HH:mm"
              :range-separator="$t('message.zhi')"
              :start-placeholder="$t('message.kssk')"
              :end-placeholder="$t('message.jssk')"
            />
            <span class="red pointer margin-l-10" @click="delBtn(dex)">{{ $t('message.del') }}</span>
          </div>
          <div class="addBtn" @click="tsList.push({})">{{ $t('message.tijia') }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showGZPZ = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmitb">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('message.dinshi')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showDs"
    >
      <el-form ref="ruleFormc" :model="ds" :rules="rulec" label-width="auto" label-suffix="：">
        <el-form-item :label="$t('message.shibei')" prop="macId">
          <el-select
            v-model="ds.macId"
            style="width: 100%"
            :placeholder="$t('message.qxz') + $t('message.shibei')"
            @change="sbChange"
          >
            <el-option
              v-for="item in sbList"
              :key="item.id"
              :label="item.devName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.sbxl')" prop="lineId">
          <el-select
            v-model="ds.lineId"
            multiple
            style="width: 100%"
            :placeholder="$t('message.qxzxldx')"
          >
            <el-option
              v-for="item in xlList"
              :key="item.lineId"
              :label="item.lineName"
              :value="item.lineId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.dkzt')" prop="status">
          <el-radio-group v-model="ds.status">
            <el-radio label="true">{{ $t('message.kd') }}</el-radio>
            <el-radio label="false">{{ $t('message.gd') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('message.xhzq')" prop="week">
          <el-checkbox-group v-model="ds.week" @change="handleCheckAllChange">
            <el-checkbox :label="$t('message.num1')">{{ $t('message.z1') }}</el-checkbox>
            <el-checkbox :label="$t('message.num2')">{{ $t('message.z2') }}</el-checkbox>
            <el-checkbox :label="$t('message.num3')">{{ $t('message.z3') }}</el-checkbox>
            <el-checkbox :label="$t('message.num4')">{{ $t('message.z4') }}</el-checkbox>
            <el-checkbox :label="$t('message.num5')">{{ $t('message.z5') }}</el-checkbox>
            <el-checkbox :label="$t('message.num6')">{{ $t('message.z6') }}</el-checkbox>
            <el-checkbox :label="$t('message.num7')">{{ $t('message.z7') }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('message.kgsj')" prop="time">
          <el-time-picker
            v-if="ds.week.length > 0"
            v-model="ds.time"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            :placeholder="$t('message.xzsj')"
          />
          <el-date-picker
            v-else
            v-model="ds.time"
            type="datetime"
            :placeholder="$t('message.xzrqsj')"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDs = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmitc">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('message.bdcqcd')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showCqcd"
    >
      <el-form ref="ruleFormcq" label-suffix="：" :model="cqcqObj">
        <el-form-item v-for="(item, index) in cqcd" :key="index" :label="$t('message.cqcd')">
          <el-col :span="8">
            <el-input v-model="item.fieldName" readonly />
          </el-col>
          <el-col class="line" :span="1" style="text-align: center">-</el-col>
          <el-col :span="8">
            <el-input v-model="item.placeName" readonly />
          </el-col>
          <el-col class="line" :span="2" style="text-align: center; color:red;cursor: pointer;"><span @click="sccdcq(index)">{{ $t('message.del') }}</span></el-col>
        </el-form-item>
        <el-form-item :label="$t('message.cqcd')">
          <el-col :span="8">
            <el-select
              v-model="cqcqObj.cq"
              :placeholder="$t('message.qxz') + $t('message.cq')"
              style="width: 100%"
              @change="getSpaceList(cqcqObj.cq)"
            >
              <el-option
                v-for="item in cqList"
                :key="item.id"
                :label="item.areaName"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col class="line" :span="1" style="text-align: center">-</el-col>
          <el-col :span="8">
            <el-select
              v-model="cqcqObj.cd"
              :placeholder="$t('message.qxz') + $t('message.cd')"
              style="width: 100%"
            >
              <el-option
                v-for="item in cdList"
                :key="item.id"
                :label="item.siteName"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col class="line primaryColor pointer" :span="2" style="text-align: center;"><span @click="tjcdcq">{{ $t('message.tijia') }}</span></el-col>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      :title="$t('message.ckds')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showDslist"
    >
      <el-table
        :data="dsList"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column
          align="center"
          :label="$t('message.dkzt')"
          prop="status"
          min-width="150"
        >
          <template slot-scope="scope">
            {{ scope.row.status == 'true'?$t('message.open'):$t('message.gx') }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('message.dslx')"
          prop="type"
          min-width="150"
        >
          <template slot-scope="scope">
            {{ scope.row.type == '1'?$t('message.dcds'):$t('message.xhds') }}
          </template></el-table-column>
        <el-table-column
          align="center"
          :label="$t('message.xhzq')"
          prop="week"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.kgsj')"
          prop="time"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column :label="$t('message.caozuo')" align="center" width="200" fixed="right">
          <template slot-scope="scope">
            <div class="flex-cc">
              <el-button v-preventReClick type="text" @click="showBjDsBtn(scope.row)">{{ $t('message.edit') }}</el-button>
              <el-button v-preventReClick type="text" class="secondColor" @click="showScDsBtn(scope.row)">{{ $t('message.del') }}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      :title="$t('message.bjds')"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showBjDs"
    >
      <el-form ref="ruleFormd" :model="ds" :rules="rulec" label-width="auto" label-suffix="：">
        <el-form-item :label="$t('message.dkzt')" prop="status">
          <el-radio-group v-model="ds.status">
            <el-radio label="true">{{ $t('message.kd') }}</el-radio>
            <el-radio label="false">{{ $t('message.gd') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('message.xhzq')" prop="week">
          <el-checkbox-group v-model="ds.week" @change="handleCheckAllChange">
            <el-checkbox :label="$t('message.num1')">{{ $t('message.z1') }}</el-checkbox>
            <el-checkbox :label="$t('message.num2')">{{ $t('message.z2') }}</el-checkbox>
            <el-checkbox :label="$t('message.num3')">{{ $t('message.z3') }}</el-checkbox>
            <el-checkbox :label="$t('message.num4')">{{ $t('message.z4') }}</el-checkbox>
            <el-checkbox :label="$t('message.num5')">{{ $t('message.z5') }}</el-checkbox>
            <el-checkbox :label="$t('message.num6')">{{ $t('message.z6') }}</el-checkbox>
            <el-checkbox :label="$t('message.num7')">{{ $t('message.z7') }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('message.kgsj')" prop="time">
          <el-time-picker
            v-if="ds.week.length > 0"
            v-model="ds.time"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            :placeholder="$t('message.xzsj')"
          />
          <el-date-picker
            v-else
            v-model="ds.time"
            type="datetime"
            :placeholder="$t('message.xzrqsj')"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showBjDs = false">{{ $t('message.qx') }}</el-button>
        <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmitd">{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { accountConfig, accountInfo, lightList, ruleConfig, ruleInfo, syncDevice, manufacturerList, manufacturerDetail, getAreaList, spaceList, controlLine, closeLight, bindInfo, bindArea, timerList, delTimer, timerSave, devLine } from '@/api'
import { parseTime } from '@/utils'
import store from '@/store'
export default {
  name: 'Devicef',
  data() {
    return {
      modalDialog: store.getters.dialog,
      subLoading: false,
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      tsList: [],
      sbList: [],
      xlList: [],
      title: '',
      tabList: [],
      functors: [],
      active: '0',
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      list: [],
      listLoading: true,
      openStatus: [
        { value: true, label: this.$t('message.kai') },
        { value: false, label: this.$t('message.guan') }
      ],
      filters: {},
      form: {},
      showZhpz: false,
      rules: {
        account: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.yhzh'), trigger: 'blur' }
        ],
        appKey: [
          { required: true, message: this.$t('message.qsr') + 'AppKey', trigger: 'blur' }
        ],
        appSecret: [
          { required: true, message: this.$t('message.qsr') + 'AppSecret', trigger: 'blur' }
        ],
        facturerId: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.sbcs'), trigger: 'change' }
        ],
        passwd: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.password'), trigger: 'blur' }
        ],
        projectCode: [
          { required: true, message: this.$t('message.qsr') + 'projectCode', trigger: 'blur' }
        ],
        redirectUrl: [
          { required: true, message: this.$t('message.qsr') + 'redirectUrl', trigger: 'blur' }
        ]
      },
      showGZPZ: false,
      gzpz: {},
      ruleb: {
        kd: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.kdtqsj'), trigger: 'blur' },
          { pattern: /^([1-9]\d*|[0]{1,1})$/, message: this.$t('message.qsr') + this.$t('message.zssj'), trigger: 'blur' }
        ],
        gd: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.gdycsj'), trigger: 'blur' },
          { pattern: /^([1-9]\d*|[0]{1,1})$/, message: this.$t('message.qsr') + this.$t('message.zssj'), trigger: 'blur' }
        ]
      },
      showDs: false,
      ds: {
        week: []
      },
      rulec: {
        macId: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.shibei'), trigger: 'change' }
        ],
        lineId: [
          { required: true, message: this.$t('message.qxzxldx'), trigger: 'change' }
        ],
        status: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.dkzt'), trigger: 'change' }
        ],
        time: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.time'), trigger: 'change' }
        ]
      },
      showCqcd: false,
      cqcd: [],
      cqcqObj: {},
      cqList: [],
      cdList: [],
      showDslist: false,
      dsList: [],
      showBjDs: false,
      lineId: ''
    }
  },
  created() {
    this.tomanufacturerList()
    this.toGetAreaList()
    this.title = this.$route.meta.title.substring(0, this.$route.meta.title.length - 2)
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    // 删除特殊配置
    delBtn(index) {
      const that = this
      this.$confirm(this.$t('message.sctssjtc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      })
        .then(() => {
          that.tsList.splice(index, 1)
        })
        .catch(() => {
          // this.$message.info('已取消删除')
        })
    },
    getdevLine() {
      const venueId = sessionStorage.getItem('venueId')
      devLine({ param: { venueId, facturerId: this.tabList[this.active].id }}, venueId).then(res => {
        this.sbList = res.recordList || []
        this.xlList = []
      })
    },
    sbChange() {
      this.$set(this.ds, 'lineId', null)
      this.xlList = []
      this.sbList.forEach(e => {
        if (e.id === this.ds.macId) {
          this.xlList = e.lineResponseParamList
        }
      })
    },
    showBjDsBtn(e) {
      this.ds = {
        time: e.time,
        status: e.status,
        macId: e.macId,
        autoid: e.autoid,
        lineId: e.channel,
        id: e.id,
        week: e.week.split('')
      }
      this.showBjDs = true
    },
    showScDsBtn(e) {
      const venueId = sessionStorage.getItem('venueId')
      delTimer({ param: { venueId, id: e.id, facturerId: this.tabList[this.active].id, macId: e.macId, autoid: e.autoid }}, venueId).then(res => {
        if (res.errorCode === '000000') {
          this.$message.success(this.$t('message.delcg'))
          this.showDslist = false
          this.getList(1)
          // timerList({ param: { venueId, facturerId: this.tabList[this.active].id, lineId: this.lineId, autoid: '0' }}, venueId).then(resb => {
          //   this.dsList = resb.recordList || []
          //   this.showDslist = true
          // })
        }
      })
    },
    onSubmitd() {
      // const that = this
      this.$refs.ruleFormd.validate((valid) => {
        if (valid) {
          const param = { ...this.ds }
          param.venueId = sessionStorage.getItem('venueId')
          param.facturerId = this.tabList[this.active].id
          param.week = param.week.join(',')
          this.subLoading = true
          timerSave({
            param
          }, sessionStorage.getItem('venueId')).then(res => {
            this.subLoading = false
            if (res.errorCode === '000000') {
              this.$message.success(this.$t('message.dsszcg'))
              this.showBjDs = false
              this.showDslist = false
              this.getList(1)
            }
          }).catch(err => {
            this.subLoading = false
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    showTimeBtn(e) {
      const venueId = sessionStorage.getItem('venueId')
      this.lineId = e.id
      timerList({ param: { venueId, facturerId: this.tabList[this.active].id, lineId: e.id, autoid: '0' }}, venueId).then(res => {
        this.dsList = res.recordList || []
        this.showDslist = true
      })
    },
    toGetAreaList() {
      const venueId = sessionStorage.getItem('venueId')
      getAreaList({ param: { venueId }}).then(res => {
        this.cqList = res.recordList
      })
    },
    getSpaceList(id) {
      this.$set(this.cqcqObj, 'cd', '')
      this.$refs.ruleFormcq.clearValidate()
      spaceList({ param: { id }}).then(res => {
        this.cdList = res.recordList
      })
    },
    showCqcdBtn(e) {
      const venueId = sessionStorage.getItem('venueId')
      this.lineId = e.id
      bindInfo({ param: { venueId, facturerId: this.tabList[this.active].id, lineId: e.id }}, venueId).then(res => {
        this.cqcqObj = {}
        this.cqcd = res.record.bindParamList || []
        this.showCqcd = true
      })
    },
    tjcdcq() {
      if (!this.cqcqObj.cq) {
        this.$message.warning(this.$t('message.qxz') + this.$t('message.cq'))
        return
      }
      if (!this.cqcqObj.cd) {
        this.$message.warning(this.$t('message.qxz') + this.$t('message.cd'))
        return
      }
      const venueId = sessionStorage.getItem('venueId')
      const bindParams = this.cqcd
      bindParams.push({
        fieldId: this.cqcqObj.cq,
        placeId: this.cqcqObj.cd
      })
      bindArea({ param: { venueId, facturerId: this.tabList[this.active].id, bindParams, lineId: this.lineId }}, venueId).then(res => {
        if (res.errorCode === '000000') {
          this.getList(1)
          bindInfo({ param: { venueId, facturerId: this.tabList[this.active].id, lineId: this.lineId }}, venueId).then(res => {
            this.cqcqObj = {}
            this.cqcd = res.record.bindParamList || []
            this.showCqcd = true
          })
        }
      })
    },
    sccdcq(index) {
      const bindParams = [...this.cqcd]
      const venueId = sessionStorage.getItem('venueId')
      bindParams.splice(index, 1)
      bindArea({ param: { venueId, facturerId: this.tabList[this.active].id, bindParams, lineId: this.lineId }}, venueId).then(res => {
        if (res.errorCode === '000000') {
          this.$message.success(this.$t('message.delcg'))
          this.getList(1)
          bindInfo({ param: { venueId, facturerId: this.tabList[this.active].id, lineId: this.lineId }}, venueId).then(res => {
            this.cqcqObj = {}
            this.cqcd = res.record.bindParamList || []
            this.showCqcd = true
          })
        }
      })
    },
    showDsBtn() {
      this.showDs = true
      this.getdevLine()
      this.ds = { week: [] }
    },
    onSubmitc() {
      // const that = this
      this.$refs.ruleFormc.validate((valid) => {
        if (valid) {
          const param = { ...this.ds }
          param.autoid = '0'
          param.venueId = sessionStorage.getItem('venueId')
          param.facturerId = this.tabList[this.active].id
          param.lineId = param.lineId.join(',')
          param.week = param.week.join(',')
          this.subLoading = true
          timerSave({
            param
          }, sessionStorage.getItem('venueId'))
            .then(res => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                this.$message.success(this.$t('message.dsszcg'))
                this.showDs = false
              }
            })
            .catch(err => {
              this.subLoading = false
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCheckAllChange() {
      // this.$set(this.ds, 'time', '')
    },
    showGzpzBtn() {
      this.showGZPZ = true
      ruleInfo({
        param: {
          facturerId: this.tabList[this.active].id,
          venueId: sessionStorage.getItem('venueId')
        }
      },
      sessionStorage.getItem('venueId')
      )
        .then(res => {
          if (res.errorCode === '000000') {
            if (res.record.ruleParams) {
              const arr = res.record.ruleParams
              this.$set(this.gzpz, 'isOpen', res.record.isOpen)
              arr.forEach(e => {
                if (e.type === '0') {
                  this.$set(this.gzpz, 'kd', e.time)
                } else {
                  this.$set(this.gzpz, 'gd', e.time)
                }
              })
            } else {
              this.gzpz = {}
            }
            this.tsList = []
            if (res.record.ruleTimeParams && res.record.ruleTimeParams.length > 0) {
              const arr = res.record.ruleTimeParams
              let time = []
              arr.forEach(e => {
                if (e.startDate && e.endDate) {
                  time = [e.startDate, e.endDate]
                } else {
                  time = []
                }
                this.tsList.push({
                  areaId: e.areaId,
                  time: time
                })
              })
            }
            this.$refs.ruleFormb.clearValidate()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    onSubmitb() {
      // const that = this
      this.$refs.ruleFormb.validate((valid) => {
        if (valid) {
          const param = {}
          param.isOpen = this.gzpz.isOpen
          const ruleTimeParams = []
          param.ruleParams = [{
            status: '1',
            time: this.gzpz.kd,
            type: '0'
          }, {
            status: '0',
            time: this.gzpz.gd,
            type: '1'
          }]
          const tsList = this.tsList
          let pd = false
          tsList.forEach(e => {
            if (!e.areaId) {
              pd = true
              return this.$message.info(this.$t('message.qxz') + this.$t('message.cq'))
            } else if (!e.time || e.time.length < 2) {
              pd = true
              return this.$message.info(this.$t('message.qxz') + this.$t('message.sjd'))
            } else {
              ruleTimeParams.push({
                areaId: e.areaId,
                endDate: e.time[1],
                startDate: e.time[0]
              })
            }
          })
          if (pd) {
            return false
          }
          param.ruleTimeParams = ruleTimeParams
          param.venueId = sessionStorage.getItem('venueId')
          param.facturerId = this.tabList[this.active].id
          this.subLoading = true
          ruleConfig({
            param
          }).then(res => {
            this.subLoading = false
            if (res.errorCode === '000000') {
              this.$message.success(this.$t('message.gzpzcg'))
              this.showGZPZ = false
            }
          }).catch(err => {
            this.subLoading = false
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onSubmit() {
      // const that = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const param = this.form
          param.venueId = sessionStorage.getItem('venueId')
          param.facturerId = Number(param.facturerId)
          this.subLoading = true
          accountConfig({
            param
          }).then(res => {
            this.subLoading = false
            if (res.errorCode === '000000') {
              this.$message.success(this.$t('message.zhpzcg'))
              this.showZhpz = false
            }
          }).catch(err => {
            this.subLoading = false
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    tbBtn() {
      syncDevice({ param: { facturerId: this.tabList[this.active].id, venueId: sessionStorage.getItem('venueId') }}, sessionStorage.getItem('venueId')).then(res => {
        if (res.errorCode === '000000') { this.getList(1) }
      }).catch(err => {
        console.log(err)
      })
    },
    showZhpzBtn() {
      this.showZhpz = true
      accountInfo({ param: { facturerId: this.tabList[this.active].id, venueId: sessionStorage.getItem('venueId') }}, sessionStorage.getItem('venueId')).then(res => {
        if (res.errorCode === '000000') {
          this.form = { ...res.record, facturerId: this.tabList[this.active].id }
          // this.form.facturerId
          if (res.record.facturerId) { this.$set(this.form, 'facturerId', Number(res.record.facturerId)) }
          this.$refs.ruleForm.clearValidate()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleClick(e) {
      this.getList(1)
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      lightList({ pagination, param: { venueId, facturerId: this.tabList[this.active].id, ...filters }}, sessionStorage.getItem('venueId')).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.total = res.totalCount
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    tomanufacturerList() {
      manufacturerList({ param: { type: '5' }}, sessionStorage.getItem('venueId')).then(res => {
        this.tabList = res.recordList
        this.functors = res.recordList[0].functors || []
        this.getList(1)
      }).catch(err => {
        console.log(err)
      })
    },
    manufacturerDetail() {
      manufacturerDetail({ param: { manufacturerId: this.tabList[this.active].id }}, sessionStorage.getItem('venueId')).then(res => {
        if (res.errorCode === '000000') {
          const cont = res.record.manufacturer + res.record.text.replace(/\n/g, '<br/>')
          this.$alert(cont, this.$t('message.cssm'), {
            dangerouslyUseHTMLString: true
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    toConfigUpdate(a, b) {
      const venueId = sessionStorage.getItem('venueId')
      this.listLoading = true
      controlLine({
        param: {
          facturerId: this.tabList[this.active].id,
          lineId: b.id,
          status: a === 'true' ? '0' : '1',
          venueId
        }
      }, venueId)
        .then(res => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.$message.success(this.$t('message.xgcg'))
          }
          this.getList()
        })
        .catch(() => {
          this.getList()
          this.listLoading = false
        })
    },
    yjgd() {
      const venueId = sessionStorage.getItem('venueId')
      closeLight({ param: { facturerId: this.tabList[this.active].id, venueId }}, venueId).then(res => {
        if (res.errorCode === '000000') {
          this.$message.success(this.$t('message.xgcg'))
          this.getList(1)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.tsPz {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.addBtn {
  color: $primaryColor;
  line-height: 1;
  margin-top: 20px;
  cursor: pointer;
}
</style>
